<template>
  <div>
    <div class="title">操作记录</div>
    <el-table :data="tableData" height="326" border style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="userInfo.name" label="操作者" width="180">
        <template #default="scope">
          <div class="user">
            <el-avatar :src="scope.row.userInfo.headImage" class="avatar"></el-avatar>{{scope.row.userInfo.name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="时间" width="180"> </el-table-column>
      <el-table-column prop="behavior" label="行为记录"> </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { getLogs } from '#/Home/Home'
import { reactive, toRefs } from 'vue'
import { ElMessage } from 'element-plus'
export default {
  name: 'DataViewTwo',
  setup() {
    const state = reactive({
      tableData: []
    });
    const getLogsInfo = async () => {
      await getLogs().then(res => {
        // console.log(res)
        if (res.data.ret === 0) {
          state.tableData = res.data.logs.logs.reverse();
        } else {
          return ElMessage.error('获取日志信息失败！')
        }
      })
    }
    getLogsInfo();
    return {
      ...toRefs(state),
      getLogsInfo
    }
  },
};
</script>

<style lang="less" scoped>
.title {
  font-weight: bold;
  margin-bottom: 20px;
}
.user {
  display: flex;
  align-items: center;
  .avatar {
    margin-right: 5px;
  }
}
</style>